<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>{{goods}}</div>
        <div>一级分类：
            <select v-model="goods.first_cateid">
                <option value="" disabled>请选择</option>
                <option :value="item.id" v-for="item of first_cateids" :key="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>
            二级分类：
            <select v-model="goods.second_cateid">
                <option value="" disabled>请选择</option>
                <option :value="item" v-for="(item,index) of second_cateids" :key="index">{{item}}</option>
            </select>
        </div>
        <div>商品名称：<input type="text" v-model="goods.goodsname"></div>
        <div>价格：<input type="text" v-model="goods.price"></div>
        <div>市场价格：<input type="text" v-model="goods.market_price"></div>
        <div>
            商品规格：
            <select v-model="goods.specsid">
                <option value="" disabled>请选择</option>
                <option :value="item.id" v-for="item of specsids" :key="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>
            商品属性：
            <select multiple v-model="goods.specsattr">
                <option value="" disabled>请选择</option>
                <option :value="item" v-for="(item,index) of specsattrs" :key="index">{{item}}</option>
            </select>
        </div>
        <div>
            是否新品：
            <label>
                <input type="radio" name="isnew" v-model="goods.isnew" value="1">是
            </label>
            <label>
                <input type="radio" name="isnew" v-model="goods.isnew" value="0">否
            </label>
        </div>
        <div>
            是否热卖：
            <label>
                <input type="radio" name="ishot" value="1" v-model="goods.ishot">是
            </label>
            <label>
                <input type="radio" name="ishot" value="0" v-model="goods.ishot">否
            </label>
        </div>
        <div>状态:<input type="checkbox" v-model="goods.status"></div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                first_cateids: [{
                    id: 0,
                    name: '家用电器'
                }, {
                    id: 1,
                    name: '美妆护肤'
                }, {
                    id: 2,
                    name: '电子产品'
                }],
                second_cateids: ['精华','爽肤水','美容仪'],
                specsids:[{
                    id:0,
                    name:'颜色'
                },{
                    id:1,
                    name:'大小'
                },{
                    id:2,
                    name:'尺寸'
                }],
                specsattrs:['红色','黄色','绿色'],
                // goods: {
                //     goodsname:'',
                //     first_cateid:'',
                //     second_cateid:'',
                //     price:'',
                //     market_price:'',
                //     specsid:'',
                //     specsattr:[],
                //     isnew:'',
                //     ishot:'',
                //     status:'',
                // },
                goods: {
                    goodsname:"SK2神仙水",
                    first_cateid:1,
                    second_cateid:"精华",
                    price:"999",
                    market_price:"1099",
                    specsid:'0',
                    specsattr:["红色","黄色"],
                    isnew:'1',
                    ishot:'1',
                    status:true,
                }
            }
        },
        methods: {

        }
    })
</script>

</html>